<template>
	<div class="myrandomly">
		<div class="photoHeaderBox flex">
			<p>随手拍</p> <span>(共{{ pageData.count?pageData.count:0 }}张图片)</span>
		</div>
		<div class="upgrade">
			<div class="operateBox" v-if="upgradeNav">
				<!-- 您的云空间使用35%，<span>升级我的存储空间</span> -->
				<el-button round class="upgradeBtn" type="primary" @click="upgradeBtn" :disabled="pageData.list && pageData.list.length > 0?false:true">管理相册</el-button>
			</div>
			<div class="functionBox" v-else>
				<p @click="diagnoseDialogBox">病虫害诊断</p>
				<p @click="evaluateDialogBox">评价</p>
				<p>分享</p>
				<p @click="deleteImages">删除</p>
				<p @click="upgradeNav = true">返回</p>
			</div>
		</div>
		<!--图文主体内容-->
		<vue-scroll :ops="ops" style="width:100%;height:600px">
			<div class="mainBox" v-if="pageData.list && pageData.list.length > 0">
				<div class="txtPicBox" v-for="(item, index) in pageData.list" :key="index">
					<div class="myrandomlyTxt flex">
						<div class="flex">
							<p>{{ item.date }}</p>
							<span class="siteTxt">{{ item.attributionName }}</span>
						</div>
						<div v-if="item.takePhotosEntities && item.takePhotosEntities.length > 0">
							<el-checkbox 
								class="imageChecked" 
								v-if="!upgradeNav"
								v-model="item.checkd" 
								:disabled="item.disabled"
								@change="selectImagesAll(item, item.takePhotosEntities, index)"
							>
								全选
							</el-checkbox>
						</div>
					</div>
					<div class="imagesBox" v-if="item.takePhotosEntities && item.takePhotosEntities.length > 0">
						<div class="imagesBoxList nt" v-for="list in item.takePhotosEntities" :key="list.id" @click="selectImagesListItem(item, list, index)">
							<el-checkbox class="imageChecked" v-if="!upgradeNav" :disabled="list.disabled" v-model="list.checkd" @change="selectImagesListItem(item, list, index)"></el-checkbox>
							<el-image class="imgSize" v-if="upgradeNav" :src="list.picture" :preview-src-list="[list.picture]" fit="cover" alt=""></el-image>
							<el-image class="imgSize" v-else :src="list.picture" fit="cover" alt=""></el-image>
						</div>
					</div>
				</div>
			</div>
			<nodata v-else></nodata>
		</vue-scroll>
		<!-- <evaluate ref="evaluate" v-if="evaluateDialog" :dataMap="selectPictureList" :itemData="pageData.list[selectPictureListIndex]"></evaluate> -->
		<!-- <diagnose ref="diagnose"></diagnose> -->
		<el-dialog title="评价" :visible.sync="evaluateDialog" width="80rem">
			<div class="dialogBox">
				<vue-scroll :ops="ops" style="width:100%;height:33rem">
					<div class="mainBox" v-if="selectPictureListIndex!==''">
						<div class="txtPicBox">
							<div class="myrandomlyTxt flex">
								<p>{{ pageData.list[selectPictureListIndex].date }}</p>
								<span class="siteTxt">{{ pageData.list[selectPictureListIndex].attributionName }}</span>
							</div>
							<div class="imagesBox">
								<div class="imagesBoxList t" v-for="(item, index) in evaluate.selectPictureListItem" :key="item.date">
									<el-checkbox :checked="true" class="imageChecked" @change="dialogDeleteImages(item.id, index)"></el-checkbox>
									<el-image class="imgSize" :src="`${item.picture}`" fit="cover" alt=""></el-image>
								</div>
							</div>
						</div>
					</div>
				</vue-scroll>
				<div class="textareaBox">
					<el-input type="textarea" v-model="evaluate.content" placeholder="请写下您的评价吧..." resize="none"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<div style="text-align: center;">
					<el-button type="primary" class="textareaBoxBtn" round @click="commentPhotos">发表</el-button>
				</div>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import nodata from '../../../../../components/noData.vue'
	// import evaluate from './components/evaluate.vue'
	// import diagnose from './components/diagnose.vue'
	export default {
		components: {
			nodata
			// evaluate,
			// diagnose
		},
		data() {
			return {
				evaluateDialog: false,
				diagnoseDialog: false,
				// 滚动条样式设置
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				upgradeNav: true,
				userId: '',
				pageData: '',
				selectPictureList: new Map(),  // 记录选中的所有果园图片
				selectPictureListIndex: '', // 记录选中的哪一个果园
				evaluate: {
					selectPictureListItem: [] ,// 记录选中的所有果园图片转换的数组
					content: ''
				}
			}
		},
		created() {
			// 页面始化设置左边导航栏状态
			this.$store.commit('set_myManagementNavIndex', 13)
			this.userId = this.$store.state.user.userInfo.id
		},
		mounted() {
			this.getPageData()
		},
		watch:{
			upgradeNav(newData){
				// console.log(this.pageData)
				this.selectPictureList.clear()
				this.selectPictureListIndex = ''
				this.evaluate.selectPictureListItem = []
				this.evaluate.content = ''
				this.pageData.list.forEach((v) => {
					v.checkd = false
					v.disabled = false
					if(v.takePhotosEntities && v.takePhotosEntities.length > 0){
						v.takePhotosEntities.forEach((c) => {
							c.checkd = false
							c.disabled = false
						})
					}
				})
				setTimeout(()=>{
					this.$forceUpdate()
				},300)
			}
		},
		methods: {
			selectImagesAll(item, listData, index){
				// 全选
				if (item.checkd) {
					// 选中状态
					this.$set(item, 'checkd', true)
					listData.forEach((v) => {
						v.checkd = true
						this.selectPictureList.set(v.id, v.picture)
					})
				} else{
					// 未选中状态
					this.$set(item, 'checkd', false)
					listData.forEach((v) => {
						v.checkd = false
						this.selectPictureList.delete(v.id)
					})
				}
				this.forbiddenCheckd(index)
				// this.$forceUpdate()
			},
			selectImagesListItem(item, list, index){
				// 选择图片
				/**
				 * 判断是否点击管理按钮；
				 * 判断map是否有该条参数，有则删除，无则添加；
				 * 改变checkd状态
				 * 判断map长度是否与当前对象长度一致，改变全选checkd状态
				 */
				if(!this.upgradeNav && !list.disabled && !item.disabled){
					if(this.selectPictureList.has(list.id)){
						this.selectPictureList.delete(list.id)
					} else {
						this.selectPictureList.set(list.id, list.picture)
					}
					this.$set(list, 'checkd', !list.checkd)
					if (this.selectPictureList.size === item.takePhotosEntities.length) {
						this.$set(item, 'checkd', true)
					} else{
						this.$set(item, 'checkd', false)
					}
					// // 如果页面数据不刷新，使用强制刷新
					// this.$forceUpdate()
					this.forbiddenCheckd(index)
				}
			},
			forbiddenCheckd(index){
				// 只能选中某一个果园的数据
				if (this.selectPictureList.size > 0) {
					// 如果选中了一个果园，那么其他果园全部不能选中
					this.pageData.list.forEach((v, i) => {
						if(index != i){
							v.disabled = true
							v.takePhotosEntities.forEach((c) => {
								c.disabled = true
							})
						}
					})
					this.selectPictureListIndex = index
				} else{
					// 如果取消了选中状态，那么所有的果园都可以重新选中
					this.pageData.list.forEach((v, i) => {
						v.disabled = false
						v.takePhotosEntities.forEach((c) => {
							c.disabled = false
						})
					})
					// 清空选中的数据
					this.selectPictureList.clear()
					this.selectPictureListIndex = ''
				}
				// 如果页面数据不刷新，使用强制刷新
				this.$forceUpdate()
			},
			getPageData(){
				this.$request.postForm(this.$api.getPhotos, {
					userId: this.userId
				}).then( res => {
					if(res.code == 200){
						this.pageData = res.data
						// this.pictureList = this.pageData.list
						this.pageData.list.forEach((v) => {
							v.checkd = false
							v.disabled = false
							if(v.takePhotosEntities && v.takePhotosEntities.length > 0){
								v.takePhotosEntities.forEach((c) => {
									c.checkd = false
									c.disabled = false
								})
							}
						})
					}
				})
			},
			upgradeBtn() {
				// 管理相册按钮
				this.upgradeNav = !this.upgradeNav
			},
			deleteImages() {
				// 判断map有没有数据
				if (this.selectPictureList.size) {
					// 删除图片
					this.$confirm('确定要删除选中的图片吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let deleteIds = [...this.selectPictureList.keys()]
						this.$request.postForm(this.$api.deletePhotos,{
							ids: deleteIds.join(',')
						}).then( res => {
							if(res.code == 200){
								this.$message.success('删除成功')
								this.getPageData()
							}
						})
					})
				} else{
					this.$message.error('请选择要删除的图片')
				}
				
			},
			evaluateDialogBox() {
				// 评价
				if(this.selectPictureList.size > 0 && this.selectPictureListIndex !== ''){
					this.evaluate.content = ''
					this.evaluateDialog = true
					this.evaluate.selectPictureListItem = []
					for (let [key, value] of this.selectPictureList) {
						let data = {}
						data.id = key
						data.date = new Date().getTime() + key
						// data.checked = true
						data.picture = value
						this.evaluate.selectPictureListItem.push(data)
					}
					// setTimeout(()=>{
					// 	this.$forceUpdate()
					// },300)
				} else {
					this.$message.error('请先选择图片再进行评价')
				}
			},
			dialogDeleteImages(id, index){
				// 删除弹窗选中的图片
				// console.log(this.evaluate.selectPictureListItem.length)
				if(this.evaluate.selectPictureListItem.length < 2){
					this.$confirm('已经是最后一张了，确定要取消吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.evaluateDialog = false
						this.selectPictureList.clear()
						// 刷新接口，所有选项回复可选择状态
						this.getPageData()
					})
				} else {
					this.selectPictureList.delete(id)
					// this.evaluate.selectPictureListItem = []
					// for (let [key, value] of this.selectPictureList) {
					// 	let data = {}
					// 	data.id = key
					// 	// data.checked = true
					// 	data.picture = value
					// 	this.evaluate.selectPictureListItem.push(data)
					// }
					this.evaluate.selectPictureListItem.splice(index, 1)
				}
			},
			diagnoseDialogBox() {
				// 病虫害诊断
				this.$refs.diagnose.$data.centerDialogVisible = true
			},
			commentPhotos(){
				// 给随手拍图片添加评论
				if(this.evaluate.content == ''){
					this.$message.error('请先写评论再尝试提交')
				} else {
					this.$request.postForm(this.$api.commentPhotos, {
						ids: [...this.selectPictureList.keys()].join(','),
						content: this.evaluate.content
					}).then( res => {
						if(res.code == 200){
							this.$message.success('评论成功')
							setTimeout(() => {
								this.evaluateDialog = false
							}, 700)
							// 刷新接口，所有选项回复可选择状态
							this.getPageData()
						}
					})
				}
			}
		}

	}
</script>

<style scoped="scoped">
	.myrandomly {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		padding: 20px;
	}

	.flex {
		display: flex;
		flex-wrap: nowrap;
	}

	.photoHeaderBox {
		width: 100%;
		background: #FFFFFF;
	}

	.photoHeaderBox span {
		color: #AAAAAA;
		font-size: 12px;
		margin: 8px 0 0 0;
	}

	.photoHeaderBox>p {
		text-align: center;
		color: #333;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 20px;
		margin-right: 5px;
	}

	.upgrade {
		width: 100%;
		padding: 10px 20px;
		background: #F3F3F3;
		text-align: right;
		color: #333333;
		font-size: 12px;
		position: relative;
		margin: 20px 0;
	}

	.upgrade span {
		color: #23B14D;
	}

	.upgradeBtn {
		/* position: absolute; */
		/* right: 20px;
		top: 7px; */
	}

	.functionBox {
		width: 100%;
		text-align: right;
	}

	.functionBox p {
		display: inline-block;
		color: #333333;
		margin-left: 50px;
		position: relative;
		cursor: pointer;
	}

	.functionBox p::after {
		content: '';
		position: absolute;
		width: 1px;
		height: 100%;
		background: #808080;
		right: -25px;
	}

	.functionBox p:last-child::after {
		display: none;

	}
	/**主体内容 */
	.mainBox {
		width: 900px;
		background-color: #fff;
	}

	.txtPicBox {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.myrandomlyTxt {
		position: relative;
		line-height: 15px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
	}
	.myrandomlyTxt .imageChecked{
		position: relative;
		top: 0;
		left: 0;
	}
	.myrandomlyTxt>p {
		/* width: 120px; */
		line-height: 15px;
		text-align: left;
		color: #333;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-right: 20px;
	}

	.siteTxt {
		box-sizing: border-box;
		color: #AAAAAA;
		color: #aaa;
		font-size: 12px;
		margin-left: 20px;
	}

	.imagesBox {
		padding: 15px 0;
	}

	.imagesBoxList {
		position: relative;
		display: inline-block;
		margin-left: 4px;
	}

	.nt:nth-child(6n+1) {
		margin-left: 0;
	}

	.imageChecked {
		position: absolute;
		top: 8px;
		left: 8px;
	}

	.imgSize {
		width: 146px;
		height: 146px;
		cursor: pointer;
	}

	.imagesBoxList>>>.el-checkbox__input .el-checkbox__inner {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.imagesBoxList>>>.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #23B14D !important;
	}
	.dialogBox .mainBox{
		width: 100%;
	}
	.dialogBox .myrandomlyTxt{
		justify-content: flex-start;
	}
	.dialogBox .siteTxt{
		margin-left: 0;
	}
	.dialogBox>>>textarea.el-textarea__inner{
		height: 200px;
	}
	.textareaBoxBtn{
		width: 200px;
	}
	.dialogBox>>>.el-dialog__footer{
		text-align: center;
	}
	.dialogBox .t:nth-child(5n+1) {
		margin-left: 0;
	}
</style>
